import {createApp} from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
import directive from "@/directive";
import './utils/setRem'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import plugins from './plugins'
import {getDict} from '@/utils/dict'
import DictTag from '@/components/common/DictTag'
import elTableInfiniteScroll from 'el-table-infinite-scroll';
import mitt from 'mitt'
import 'element-plus/theme-chalk/dark/css-vars.css'
import "@/assets/css/common.scss"
import "@/assets/css/dark-vars.scss"


const Mit = mitt()

//图片预览工具
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
//高亮工具
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import 'github-markdown-css'

//v-md-editor
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
import createTipPlugin from '@kangc/v-md-editor/lib/plugins/tip/index';
import '@kangc/v-md-editor/lib/plugins/tip/tip.css';
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';

VueMarkdownEditor.use(githubTheme, {
    Hljs: hljs,
});
VueMarkdownEditor.use(createTipPlugin());
VueMarkdownEditor.use(createCopyCodePlugin());
const app = createApp(App)
app.config.globalProperties.$dict = getDict
app.config.globalProperties.$Bus = Mit
app.use(VueMarkdownEditor)
app.use(router)
app.use(ElementPlus)
app.use(store)
app.use(plugins)
app.use(elTableInfiniteScroll);
app.use(VueViewer, {
    defaultOptions: {
        "inline": true,
        "button": true,
        "navbar": false,
        "title": true,
        "toolbar": true,
        "tooltip": true,
        "movable": true,
        "zoomable": true,
        "rotatable": true,
        "scalable": true,
        "transition": true,
        "fullscreen": true,
        "keyboard": true,
        "url": "src"
    }
})
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

directive(app)
app.directive('highlight', (el) => {
    let blocks = el.querySelectorAll('pre code');
    blocks.forEach((block) => {
        hljs.highlightElement(block)
    })
})
app.component('DictTag', DictTag)
app.mount('#app')
